import React, { useState } from 'react';
import MyDate from "./MyDate/MyDate";
import './LogItem.css'
import Card from '../../UI/Card/Card';
import Confirm from '../../UI/Confirm/Confirm';
const LogItem = (props) => {

    const [showConfirm, setShowConfirm] = useState(false)
    const [delId, setDelId] = useState('')
    const deleteItem = (id) => {
        setShowConfirm(true)

        setDelId(id)

    }
    const cancelHandler = () => {
        setShowConfirm(false)
    }
    const okHandler = () => {
        setShowConfirm(false)
        props.onDelLog(delId)
    }
    return (
        <>
            {showConfirm && <Confirm
                confirmText={'操作不能恢复，确定删除？'}
                onCancel={cancelHandler}
                onOk={okHandler} />}
            <Card className="item">
                <MyDate date={props.date} />
                {/* 日志内容的容器 */}
                <div className="content">
                    {/*
      如果将组件中的数据全部写死，将会导致组件无法动态设置，不具有使用价值
        我们希望组件数据可以由外部设置，在组件间，父组件可以通过props（属性）向子组件传递数据
    */}
                    <h2 className="desc">{props.desc}</h2>
                    <div className="time">{props.time}分钟</div>
                </div>
                <div>
                    <div className="del" onClick={() => deleteItem(props.id)}>×</div>
                </div>
            </Card>
        </>

    );
};


export default LogItem;
